<template>
	<div class="ratingselect">
		<div class="rating-type">
        	<span class="block positive" @click="select(2,$event)" :class="{'active':selectType===2}">{{desc.all}}<span class="count">{{ratings.length}}</span></span>
        	<span class="block positive" @click="select(0,$event)" :class="{'active':selectType===0}">{{desc.positive}}<span class="count">{{positives.length}}</span></span>
        	<span class="block negative" @click="select(1,$event)" :class="{'active':selectType===1}">{{desc.negative}}<span class="count">{{negatives.length}}</span></span>
       </div>  
       <div class="switch" :class="{'on':onlyContent}" @click="toggleContent">
       		<span class="icon-check_circle"></span>
       		<span class="text">只看有评价的内容</span>
       </div>
	</div>
</template>

<script>
	const POSITIVE = 0;
	const NEGATIVE = 1;
	const ALL = 2;
	export default{
		props:{
			ratings:{
				type:Array,
				default(){
					return []
				}
			},
			selectType:{
				type:Number,
				default:ALL
			},
			onlyContent:{ //只看有内容的评价还是所有的评价
				type:Boolean,
				default:false
			},
			desc:{
				type:Object,
				default(){
					return{
						all: '全部',
                        positive: '满意',
                        negative: '不满意'
					}
				}
			}
		},
		data(){
			return{
				sType:this.selectType,
				oContent:this.onlyContent
			}
		},
		computed:{
			// 计算出推荐的数组 js方法
			positives(){
				return this.ratings.filter((rating) => {
					return rating.rateType === POSITIVE;
				});
			},
			// 计算出吐槽的数组  js方法
			negatives(){
				return this.ratings.filter((rating) => {
					return rating.rateType === NEGATIVE;
				});
			}
		},
		methods:{
			select(type,event){
				this.sType=type;
				this.$emit('ratingtype-select',type);
			},
			toggleContent(event){
				this.oContent=!this.oContent;
				this.$emit('content-toggle',this.oContent);
			}
		}
	}
</script>

<style lang="stylus">
	.ratingselect
		.rating-type
			padding:18px 0
			font-size:0
			border-bottom:1px solid rgba(7,17,27,0.1)
			.block
				display:inline-block
				padding:8px 12px
				line-height:16px
				font-size:12px
				margin-right:8px
				background-color:rgb(0,160,220)
				border-radius:1px
				&.active
					color:#fff
				.count
					font-size:8px
					margin-left:2px
				&.positive
					background-color:rgba(0,160,220,0.2)
					&.active
						background-color:rgb(0,160,220)
				&.negative
					background-color:rgba(77,85,93,0.2)
					&.active
						background-color:rgb(77,85,93)
		.switch
			padding:12px 0
			line-height:24px
			border-bottom:1px solid rgba(7,17,27,0.1)
			color:rgb(147,153,159)
			font-size:0
			&.on
				.icon-check_circle
					color:#00c850
			.icon-check_circle
				display:inline-block
				vertical-align:top
				margin-right:4px
				font-size:24px
			.text
				display:inline-block
				font-size:12px
					
					
</style>